<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="foodList">
		<view class="searchHeader padding25">
			<!-- <fui-search-bar class='fuiSearch' :paddingLr="0"  radius='36' inputBackground="rgba(224, 224, 224, 0.3)"
			 background="rgba(0,0,0,0)" :showLabel='false' cancelColor='#e2e2e2' searchColor='#e2e2e2' placeholder='搜索景点或门票' @search="goSearch"></fui-search-bar> -->
		</view>
		<view class="carousel-box">
			<image class="carousel-img" :src="baseOssUrl2 + 'shanghutest/1b65852234b9c30cfcb4c4cb9324e266'" mode=""></image>
		</view>
		<view class="text-box">
			<view class="xian"></view>
			<view class="text">门票推荐</view>
			<view class="xian"></view>
		</view>
		<view class="foodContent marin25">
			<view class="food-litm " v-for="(item,index) in List" :key = 'index' @click="detilsBnt(item)">
				<view class="food-top">
					<image :src="item.image" mode="aspectFill" class="fd-img"></image>
					<view class="item-right">
						<view class="title-cont">
							<view class="left-box">
								<view class="title">
									{{item.title}}
								</view>
								<view class="tag-box">
									<view class="tag1" v-if="item.tag1">
										{{item.tag1}}
									</view>
									<view class="tag2" v-if="item.tag2">
										{{item.tag2}}
									</view>
								</view>
							</view>
							<view class="right-box">
								<view class="price">
									￥{{item.price}}
								</view>
								<view class="price2">
									￥{{item.price2}}
								</view>
							</view>
						</view>
						<view class="buy-box">
							<view class="buy-bnt">
								购买
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				List:[				
					// {
					// 	id:2,
					// 	mpId:2054420,
					// 	title:'微山岛联票',
					// 	price:130.00,
					// 	price2:160.00,
					// 	tag1:'允许退票',
					// 	tag2:'联票',
					// 	content:'微山岛门票+微山岛游船票+微山岛观光车票',
					// 	image:baseOssUrl2 + 'shanghutest/6d906e30928fc6fc184f68f65bf6d274'
					// },
					{
						id:1,
						mpId:2054399,
						title:'微山岛门票',
						price:130.00,
						price2:150.00,
						tag1:'允许退票',
						content:'微子林+铁道游击队纪念园+渔家民俗文化展馆+微子文化苑+微山湖荷园',
						image: baseOssUrl2 + 'shanghutest/c8a7c388ce51f8ae7a6ef3a674998a56'
					},
					{
						id:4,
						mpId:2063674,
						title:'微山岛大官画舫船票',
						price:50.00,
						price2:70.00,
						tag1:'允许退票',
						// tag2:'联票',
						content:'岛内大官码头 —— 内航道 —— 荷园内 —— 内航道 —— 大官码头',
						image:baseOssUrl2 + 'shanghutest/c94eb695beb6adc6926dac3d63d385da'
					},
					{
						id:3,
						mpId:2054432,
						title:'微山岛荷园画舫船票',
						price:30.00,
						price2:50.00,
						tag1:'允许退票',
						// tag2:'联票',
						content:'微山岛荷园画舫船',
						image:baseOssUrl2 + 'shanghutest/59b2320ffcac827e89517a13b8407d27'
					},
				], //列表哦
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				page: 1,
				limit: 10,
				total: '',
				longitude: 117.2407, //经度
				latitude: 34.656701, //维度
			}
		},
		onLoad() {
			this.getList()
		},
		onShow() {
			if(!uni.getStorageSync('userinfo').userId) {
				uni.showToast({
					title: '请先登录！',
					icon:'none'
				});
				setTimeout(res=>{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				},1000)
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 列表
			getList() { 
				// this.$http.get(this.$httpApi.cyList, {
				// 	data: {
				// 		 page: this.page,
				// 		 limit:this.limit,
				// 		 title: this.title,
				// 	}
				// }).then(res => {
				// 	if (res.code == 0) {
				// 		this.List = res.page
				// 		console.log(JSON.parse(res.page[0].catering.content))
				// 	}
				// })
			},
			detilsBnt(e) {
				uni.navigateTo({
					url:`/pages/ship/details/index?params=${JSON.stringify(e)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.foodList {
		height: 100%;
		.searchHeader {
			background-color: #FFFFFF;
			margin-bottom: 24rpx;
		}
		
		.searchTab {
			background: #FFFFFF;
		}
		.carousel-box {
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.carousel-img {
				width: 100%;
				height: 325rpx;
			}
		}
		.text-box {
			margin-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.xian {
				width: 300rpx;
				border-bottom: 1px solid #B4B4B4;
			}
			.text {
				font-size: 22rpx;
				color: #969696;
			}
		}
		.foodContent {
			margin-top: 26rpx;
			padding-bottom: 100rpx;
			.food-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx; 
				.food-top {
					display: flex;

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.item-right {
						width: 75%;
						margin-left: 24rpx;
						line-height: 40rpx;
						border-bottom: 1px solid #D9D9D9;

						.title-cont {
							display: flex;
							align-items: center;
							.left-box {
								.title {
									font-size: 30rpx;
								}
								.tag-box {
									margin-top: 10rpx;
									display: flex;
									align-items: center;
									.tag1 {
										border-radius: 5rpx;
										padding: 0rpx 10rpx 0rpx 10rpx;
										font-size: 16rpx;
										border: 1rpx solid #11bf8e;
										color: #11bf8e;
									}
									.tag2 {
										margin-left: 10rpx;
										border-radius: 5rpx;
										padding: 0rpx 10rpx 0rpx 10rpx;
										font-size: 16rpx;
										border: 1rpx solid #e19a35;
										color: #e19a35;
									}
								}
							}
							.right-box {
								margin-left: auto;
								.price {
									font-size: 30rpx;
									font-weight: bold;
									color: #D93C3C;
								}
								.price2 {
									text-align: right;
									font-size: 22rpx;
									color: #c6c6c6;
									text-decoration:line-through;
								}
							}
						}
						.buy-box {
							margin-top: 10rpx;
							display: flex;
							.buy-bnt {
								margin-left: auto;
								font-size: 28rpx;
								background: #11bf8e;
								padding: 2rpx 10rpx 2rpx 10rpx;
								color: #fff;
							}
						}
						.rate-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.rate-text {
								color: #EDBD0B;
								margin: 0 16rpx;
							}
						}

						.addres-cont {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #969696;

							.addr-left {
								.name1 {
									margin-right: 20rpx;
								}
							}

							.addr-right {
								display: flex;
								align-items: center;

								.ad-img {
									width: 20rpx;
									height: 25rpx;
								}
							}
						}
					}
				}

				.food-bottom { 
					margin-top: 25rpx;
					display: flex;
					justify-content: space-between;

					.itemb-left {}

					.itemb-right {
						width: 72%;
						// padding: 10rpx 0; 
						font-size: 24rpx;

						.drink {
							margin-bottom: 15rpx;
							line-height: 40rpx;
							.dr-price {
								font-size: 28rpx;
								color: #D93C3C;
								margin-right: 8rpx;
							}

							.dr-discount {
								color: #35743D;
								padding: 3rpx;
								border: 1px solid #35743D;
								margin-right: 8rpx;
							}

							.original {
								font-size: 26rpx;
								color: #B4B4B4;
								margin-right: 20rpx;
								text-decoration: line-through;
							}
						}
					}
				}


			}
		}
	}
</style>
